<template>
  <div class="nav main">
    <el-menu default-active="/index" class="el-menu-demo" text-color="#000" mode="horizontal" @select="handleSelect"
      active-text-color="#1893fc" :router="true">
      <el-menu-item index="/index">首页</el-menu-item>
      <!-- <el-menu-item index="/jobHunting">找工作</el-menu-item> -->
      <el-submenu index="1">
        <template slot="title">
          <!-- <span class="sub-title">办事指南</span> -->
          <span class="sub-title">新闻动态</span>
        </template>
        <el-menu-item :index="`11${index}`" v-if="businessGuide.length" v-for="(item, index) in businessGuide"
          :key="index">
          <!-- <div @click="goDetail(item, 1)">{{ item.name }}</div> -->
          <span @click="goDetail(item,1)">
            <a v-if="item.url" target="_bank" :href="item.url">{{item.name}}</a>
            <a v-else target="_bank" :href="`/#/infoList?id=${item.id}&type=1&code=1`">{{item.name}}</a>
          </span>
        </el-menu-item>
      </el-submenu>
      <el-menu-item index=""><a href="/#/jobHunting" target="_blank">个人求职</a></el-menu-item>
      <!-- <el-submenu index="5">
        <template slot="title">
          <span class="sub-title">企业招聘</span>
        </template>
        <el-menu-item target="_bank" v-if="companyService.length" v-for="(item, index) in companyService" :key="index">
          <span @click="goDetail(item,3)">
            <a v-if="item.url" :href="item.url">{{item.name}}</a>
            <a v-else target="_bank" :href="`/#/infoList?id=${item.id}&type=1&code=1`">{{item.name}}
            </a>
          </span>
        </el-menu-item>
      </el-submenu> -->
      <el-menu-item index="104">
        <span @click="qyfw">企业服务</span>
      </el-menu-item>
      <!-- <el-menu-item index="/jobFair">招聘会</el-menu-item> -->
      <!-- <el-menu-item index=''><a href="/#/jobFair" target="_blank">招聘会</a></el-menu-item> -->
      <!-- <el-menu-item index="/TransactionAgent">事务代理</el-menu-item> -->
      <!-- <el-menu-item index="/infoList?id=17&type=2">人才政策</el-menu-item> -->
      <el-submenu index="3">
        <template slot="title">
          <span class="sub-title">人才服务</span>
        </template>
        <el-menu-item v-if="talentService.length" v-for="(item, index) in talentService" :key="index">
          <span @click="goDetail(item,2)">
            <a v-if="item.url" target="_bank" :href="item.url">{{item.name}}</a>
            <a v-else target="_bank" :href="`/#/infoList?id=${item.id}&type=1&code=1`">{{item.name}}</a>
          </span>
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="100">
        <span @click="xmsb">项目申报</span>
      </el-menu-item>
      <!-- <el-submenu index="6">
        <template slot="title">
          <span class="sub-title">人才政策</span>
        </template>
        <el-menu-item :index="`55${index}`" v-if="talentPolicy.length" v-for="(item, index) in talentPolicy"
          :key="index">
          <a v-if="item.url" target="_bank" :href="item.url">{{item.name}}</a>
          <a v-else target="_bank" :href="`/#/infoList?id=${item.id}&type=1&code=1&ptan=1`">{{item.name}}</a>
        </el-menu-item>
      </el-submenu> -->

      <el-menu-item index="/infoList?id=15&type=2&ptan=1">人才政策</el-menu-item>

      <!-- <el-submenu index="2">
        <template slot="title">
          <span class="sub-title">劳务派遣</span>
        </template>
        <el-menu-item v-if="laborDispatch.length" v-for="(item, index) in laborDispatch" :key="index">
          <span @click="goDetail(item,4)">
            <a v-if="item.url" target="_bank" :href="item.url">{{item.name}}</a>
            <a v-else-if="item.id == 16" target="_bank" :href="`/#/infoList?id=${item.id}&type=1`">{{item.name}}</a>
            <a v-else target="_bank" :href="`/#/infoDetail?id=${item.id}&type=1&code=1`">{{item.name}}</a>
          </span>
        </el-menu-item>
      </el-submenu> -->
      <el-menu-item index="101">
        <span @click="lxwm">联系我们</span>
      </el-menu-item>
      <!-- <a target="_bank" href="/#/infoDetail?id=187&type=2">网上招聘办理流程</a> -->
    </el-menu>
  </div>
</template>

<script>
import { getNavList } from '../../api/index';
export default {
  data () {
    return {
      // 办事指南
      businessGuide: [],
      // 人才服务
      talentService: [],
      // 企业服务
      companyService: [],
      // 劳务派遣
      laborDispatch: [],
      //人才政策
      talentPolicy: [],
      url: ''
    };
  },
  computed: {
    onRoutes () {
      // return this.$route.path;
    }
  },
  created () {
    this.url = process.env.VUE_APP_URL
    this.getNav(1);
    this.getNav(2);
    this.getNav(3);
    this.getNav(4);
    this.getNav(5);
  },
  methods: {
    handleSelect (a, b) {
      console.log(a, b);
      this.onRoutes = a;
    },
    getNav (code) {
      getNavList(code).then(data => {
        if (data.success) {
          switch (code) {
            case 1:
              this.businessGuide = data.data || [];
              localStorage.setItem(`nav${code}`, JSON.stringify(this.businessGuide));
              break;
            case 2:
              this.talentService = data.data || [];
              localStorage.setItem(`nav${code}`, JSON.stringify(this.talentService));
              break;
            case 3:
              this.companyService = data.data || [];
              localStorage.setItem(`nav${code}`, JSON.stringify(this.companyService));
              break;
            case 4:
              this.laborDispatch = data.data || [];
              localStorage.setItem(`nav${code}`, JSON.stringify(this.laborDispatch));
              break;
            case 5:
              this.talentPolicy = data.data || [];
              localStorage.setItem(`nav${code}`, JSON.stringify(this.talentPolicy));
              break;
          }
        } else {
          this.$message.error(`${data.msg}`);
        }
      });
    },
    goDetail (item, code) {
      localStorage.setItem(`navCurrent`, localStorage.getItem(`nav${code}`))
    },
    xmsb () {
      window.location.href = this.url + 'b' + 'project'
    },
    lxwm () {
      window.location.href = this.url + 'contact'
    },
    qyfw () {
      window.location.href = this.url + '/company'
    }
  }
};
</script>

<style lang="css" scoped>
.nav {
    height: 50px;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
}
.el-menu {
    display: flex;
    text-align: center;
    border: none;
    width: 100%;
    justify-content: space-between;
    height: 50px;
    align-items: center;
}
.el-menu .el-menu-item {
    width: 64px;
    margin: 0 45px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    padding: 0 !important;
}
.el-menu--horizontal > .el-menu-item {
    height: 50px;
    line-height: 50px;
}

.el-menu--popup .el-menu-item {
    width: auto;
    margin: 0;
    text-align: center;
}
.nav /deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
    height: 50px;
    line-height: 50px;
}
.sub-title {
    font-size: 16px;
    color: rgba(34, 34, 34, 1);
}
a {
    color: #222222;
}
.el-menu .el-menu-item a:not(.is-disabled):focus,
.el-menu .el-menu-item a:not(.is-disabled):hover {
    color: #1893fc !important;
}
</style>